<template>
	<view>
		<view class='fixed-box'>
			<cu-custom></cu-custom>
			<view class='head-bg'></view>
			<view class='tab-box'>
				<view class='tab-item' :class='{active: index == tabIndex}' v-for='(item,index) in tabs' :key='index'
					@click='handleChangeTab(index)'>{{item}}</view>
			</view>
		</view>

		<view class='page-content'>
			<introduceBox v-if='tabIndex == 0'></introduceBox>
			<searchBox v-if='tabIndex == 1'></searchBox>
			<disputeBox v-if='tabIndex == 2'></disputeBox>
			<authBox v-if='tabIndex == 3'></authBox>
		</view>
	</view>
</template>

<script>
	import introduceBox from './components/introduce-box'
	import searchBox from './components/search-box'
	import disputeBox from './components/dispute-box'
	import authBox from './components/auth-box'
	export default {
		components: {
			introduceBox,
			searchBox,
			disputeBox,
			authBox
		},
		data() {
			return {
				tabIndex: 0,
				tabs: ['认证介绍', '认证查询', '争议处理', '我要认证']
			}
		},
		methods: {
			init(e = {}) {
				this.tabIndex = (e && e.tabIndex) || 0
			},
			handleChangeTab(index) {
				if (this.tabIndex == index) return;
				this.tabIndex = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.fixed-box {
		width: 100%;
		position: sticky;
		top: 0;
		overflow: hidden;
		z-index: 2;
		.head-bg {
			background-image: url('https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501071622198000.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 500rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.tab-box {
			margin-top: 65rpx;
			position: relative;
			z-index: 2;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 32rpx 24rpx 42rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;


			.tab-item {
				width: 164rpx;
				height: 56rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F5F5F5;
				border-radius: 28rpx;
				font-size: 26rpx;
				color: var(--btnColor);
				position: relative;

				&.active {
					background: var(--primaryBg);
					color: var(--h1Color);
					font-weight: 600;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						position: absolute;
						left: 50%;
						bottom: -40rpx;
						transform: translateX(-50%);
						border: 24rpx solid transparent;
						border-top-color: var(--primaryBg);
					}
				}
			}
		}
	}

	.page-content {
		position: relative;
	}
</style>